<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p class="p1">这是p1</p>
    <input type="text" class="input1">
    <script>
        var p1Ele = document.querySelector('.p1');
        var inputEle = document.querySelector('.input1');
        var YELLOW = 'yellow';

        // 获取 当前 样式 的字体颜色
        var preColor = getComputedStyle(p1Ele,null).color;
        
        p1Ele.onclick = function () {
            console.log('点击');
        }
        p1Ele.onmouseover = function () {
            console.log('移入');
        }
        p1Ele.onmouseout = function () {
            console.log('移出');
        }
        p1Ele.onmousedown = function () {
            console.log('按下');
        }
        p1Ele.onmouseup = function () {
            console.log('松开');
        }
        inputEle.onkeydown = function () {

            p1Ele.style.color = YELLOW;
        }
        inputEle.onkeyup = function () {
            p1Ele.style.color = preColor;
        }
    </script>
</body>

</html>